<script setup>
import { reactive, ref } from 'vue'
import useFormEvent from '@/core/hooks/useFormEvent'
import channelApi from '@/api/content/ChannelApi'
const formRef = ref() // 表单ID

const state = reactive({ loading:false, visible: false })
// 表单数据
const formState = reactive({})
// 表单结构
const original = {
  id: '',
  name: '',
  keywords: '',
  idx: 0,
  notes: ''
}
// 表单 处理
const { onCancel, onFinish, InitializeData } = useFormEvent({state: state, remoteApi: channelApi, formState: formState, original: original, formRef: formRef})

//向父组件暴露方法和属性
defineExpose({ InitializeData })
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`频道管理`"
    placement="right"
    :width="'50%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card hoverable>
      <!-- 表单内容 begin -->
      <a-form
        ref="formRef"
        :model="formState"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 10}"
        :scroll-to-first-error="true"
        @finish="onFinish"
      >
        <a-row>
          <a-col :span="24">
            <a-form-item
              label="名称" name="name" :label-col="{span:3}"
              :rules="[{ required: true, message: '请输入名称!' }]"
            >
              <a-input v-model:value="formState.name" show-count :minlength="2" :maxlength="120" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="关键字" name="keywords" :label-col="{span:3}">
              <a-input v-model:value="formState.keywords" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="排序" name="idx"
              :rules="[{ required: true, message: '请输入排序'}]"
            >
              <a-input-number v-model:value="formState.idx" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="备注" name="notes" :label-col="{span:3}" :wrapper-col="{ span: 21}">
              <a-textarea v-model:value="formState.notes" show-count />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item name="id">
              <a-space wrap>
                <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                <a-button size="large" block @click="onCancel">取消</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-drawer>
</template>